React Aria Button

実装

マウス、タッチ、キーボード操作するためのアクションが実行できる

インタラクションやアクセシビリティ機能には、考慮すべきブラウザー間の不一致が多数あります

わかりみが深い

こんどからこのリンクを投げつけるようにしよう

ボタンというのは簡単そうにみえて複雑に考えることが多いものだよね

あとunStyleなボタンとかもリンクなのかボタンなのかみたいなとこあるよね

code:typescript

import {Link} from 'react-aria-components';

Adobe

</Link>

React Ariaはこういうふうにリンクボタンコンポーネントを提供している

中身をみにいく

hrefがあるかないかでaタグかspanタグにしている

let ElementType: ElementType = props.href && !props.isDisabled ? 'a' : 'span';

propsできになるのは

isPending

これ賢い気がする

よくあるよねこういうUI

ボタンを押したらpending状態にしておき終わったら解除

liveAnnounceでやっている

https://gyazo.com/69a4efcf1078e7a98adf7fd982b6805a

各種イベント時にdata属性が用意されていてその時のスタイルングが書ける

これいいね

イベント

Press状態やホバー、Focusなど一通りある

ブラウザのサポートは改善されていますが、React Aria はマウス イベントとタッチ イベントに加えてポインター イベントのフォールバックも実装しています。両方を監視し、マウス イベントの前にタッチ イベントが発生した場合はそれを無視します。こうすることで、どの種類のデバイスがイベントを発生させたかを判断し、ブラウザの遅延を待たずにできるだけ早くイベントを処理できるようになります。

usePressにこれらのイベントがまとまっている

ホバーについて

ButtonContextが使える

code:ts

import {ButtonContext} from 'react-aria-components';

interface ButtonGroupProps {

children?: React.ReactNode,

isDisabled?: boolean

}

function ButtonGroup({children, isDisabled}: ButtonGroupProps) {

return (

<div style={{display: 'flex', gap: 8}}>

<ButtonContext.Provider value={{isDisabled}}>

{children}

</ButtonContext.Provider>

</div>

);

}

<ButtonGroup isDisabled>

<Button>Save</Button>

<Button>Publish</Button>

</ButtonGroup>

こんな感じでButtonGroupが作れる

useButton

Buttonコンポーネントにはインポートされ使っているけどこのHooksだけインポートしてくれば通常のHTMLに同じような振る舞いを提供できる

そういえばこれに答えを出したい

参照